<template>
  <section class="about">
    <div class="about-content">
      <router-link
        to="/"
        class="back-btn"
      >
        <i class="fas fa-arrow-left" /> 返回
      </router-link>
     
      <div class="mission"> 
        <h1>关于跨星际高铁教育平台</h1>
        
        <div class="mission-item">
          <h2>我们的使命</h2>
          <p> 连接星际知识与未来学习者，打造无边界教育体验跨星际高铁教育平台的备课系统，就是老师备课的超神助手！系统里的 “星图知识引擎”，能把全球超优质的学习资料都收集起来，老师搜素材就像在点外卖，一键就能找到想要的课件、案例，备课速度直接拉满还有 “时空沙盘” 功能，老师能在系统里设计超酷的课堂。比如把知识点变成商业谈判、文化交流的虚拟闯关任务，让学生一边玩一边学。而且 “学术共生网络” 支持老师和其他老师在线 “头脑风暴”，一起优化课程设计，教学灵感源源不断。</p>
        </div>
        <div class="mission-item">
          <h3>教学初心</h3>
          <p>在科技飞速发展的时代浪潮中，跨星际高铁教育平台始终怀揣纯粹的教学初心：相信每一个学习者都蕴含着无限可能，教育的核心不是灌输知识，而是点亮思维的火种。我们希望打破地域、资源、认知的壁垒，让优质教育触手可及，帮助每一位求知者跨越学习的鸿沟，在知识的宇宙中自由翱翔。</p>
        </div>
        
        <div class="mission-item">
          <h3>教育使命</h3>
          <p>我们的使命是构建连接现在与未来的教育桥梁。通过整合前沿科技与优质教育资源，重塑学习体验，培养具备创新思维、全球视野与终身学习能力的人才。无论是初入知识殿堂的学子，还是追求自我提升的职场人，都能在平台找到适合自己的成长路径，从容应对不断变化的世界。</p>
        </div>
        
        <div class="mission-item">
          <h3>价值追求</h3>
          <p>以学习者为中心，是平台不变的价值追求。我们注重因材施教，借助智能技术精准匹配学习需求；倡导互动与协作，鼓励师生、生生之间思维的碰撞；坚守教育公平，致力于缩小因地域、经济差异造成的教育差距。让每一份努力都能被看见，每一个梦想都能照进现实。</p>
        </div>
        
        <div class="mission-item">
          <h3>未来愿景</h3>
          <p>展望未来，我们希望跨星际高铁教育平台成为全球教育创新的标杆。通过持续的技术迭代与模式创新，推动教育生态的变革，让教育不再局限于传统的课堂与书本，而是融入生活的每一个角落，助力人类文明在知识的nourish中不断迈向新的高度。</p>
        </div>
      </div>
      <div class="team">
        <h2>核心团队</h2>
        <div class="team-members">
          <div class="member">
            <h3>xxx</h3>
            <p>团队经理</p>
          </div>
          <div class="member">
            <h3>xxx</h3>
            <p>架构师</p>
          </div>
          <div class="member">
            <h3>xxx</h3>
            <p>运维师</p>
          </div>
          <div class="member">
            <h3>xxx</h3>
            <p>UI设计师</p>
          </div>
          <div class="member">
            <h3>xxx</h3>
            <p>前端开发</p>
          </div>
          <div class="member">
            <h3>xxx</h3>
            <p>后端开发</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'AboutUs'
}
</script>

<style scoped>
.about {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
  url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;  /* 这行已经存在，确保背景固定 */
  position: fixed;  /* 新增这行使整个section固定 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;  /* 允许内容滚动 */
  color: white;
  padding: 2rem;
  padding-top: 10vh;  /* 新增这行使内容下移 */
}

.about-content {
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 5rem;
  padding-bottom: 10rem;  /* 新增底部空白 */
}

.about-content h1, .mission h2 {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 700;
  font-size: 3rem;
  margin-bottom: 3rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  margin-top: 6rem;
  text-align: center;  /* 新增居中属性 */
  width: 100%;  /* 确保宽度占满父容器 */
}

.mission h2, .team h2 {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 600;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.mission p {
  font-size: 1.3rem;
  margin-bottom: 3rem;
}

.team {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team-members {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  margin: 3rem auto;  /* 修改为auto使水平居中 */
  max-width: 900px;
  width: 100%;
}

.member {
  background: rgba(102, 51, 255, 0.2);
  padding: 1.5rem;
  border-radius: 20px;
  min-width: 200px;
  flex: 0 0 calc(33.33% - 2rem);
  box-sizing: border-box;
  margin-bottom: 1.5rem;
}

.member h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.member p {
  font-size: 1rem;
  opacity: 0.8;
}

.back-btn {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: rgba(102, 51, 255, 0.7);
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  text-decoration: none;
  z-index: 10;
}

.back-btn:hover {
  background: #6633FF;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(102, 51, 255, 0.3);
}

.mission {
  margin-top: 50rem;  /* 新增上边距使整体下移 */
  margin-bottom: 3rem;
  text-align: left;
}

.mission-item h3 {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #fff;
}

.mission-item p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}</style>